<template>
    <div class="table-box">
        <ProTable ref="proTable" title="chat列表" :columns="columns" :request-api="getTableList" :init-param="initParam"
            :data-callback="dataCallback">
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <!-- <el-button type="primary" :icon="CirclePlus" @click="openDiolg('新增')">
                    新增chat
                </el-button> -->
            </template>
            <!--表格操作 -->
            <template #operation="scope">
                <el-button type="primary" link="link" :icon="View" @click="openDiolg('查看', scope.row)">
                    查看
                </el-button>
                <!-- <el-button type="primary" link="link" :icon="EditPen" @click="openDiolg('编辑', scope.row)">
                    编辑
                </el-button> -->
                <el-button type="primary" link="link" icon="Delete" @click="deleteAccount(scope.row)">
                    删除
                </el-button>
            </template>
        </ProTable>
        <MyDiolg ref="dialogRef" />
    </div>
</template >

<script setup="setup" lang="tsx" name="chat">
import { ref, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import ProTable from "@/components/ProTable/index.vue";
import MyDiolg from "./components/Form.vue";
import {
    listChat,
    getChat,
    delChat,
    addChat,
    updateChat
} from "@/api/system/wechatuser";
import {
    CirclePlus,
    Delete,
    EditPen,
    Download,
    Upload,
    View,
    Refresh
} from "@element-plus/icons-vue";
import { useHandleData } from "@/hooks/useHandleData";
const proxy = getCurrentInstance()?.proxy;

// 获取 ProTable 元素，调用其获取刷新数据方法
const proTable = ref<any>();

const dialogRef = ref(null);
// 初始化请求参数
const initParam = reactive({ });

// 数据处理
const dataCallback = (data: any) => {
    return { list: data.rows, total: data.total };
};

const columns = [
    {
        prop: 'nickName',
        label: '用户昵称',
        search: {
            el: 'input'
        }
    },
    {
        prop: 'openId',
        label: '绑定微信id',
        search: {
            el: 'input'
        }
    },


    {
        prop: 'createTime',
        label: '创建时间',
        search: {
            el: 'date-picker',
            span: 1,
            props: {
                type: 'date',
                valueFormat: 'YYYY-MM-DD HH:mm:ss'
            }
        }
    },

    {
        prop: 'operation',
        label: '操作',
        fixed: 'right',
        width: 220
    }
];

// 请求列表接口
const getTableList = (params: any) => {
    return listChat(params);
};

const deleteAccount = async (params: any) => {
    const ids = params.id
    await useHandleData(delChat, ids, '是否删除编号为' + ids + '的数据');
    proTable.value.getTableList();
};

const openDiolg = (title: string, row: any) => {
    const params = {
        title,
        isView: title === "查看",
        rowData: { ...row },
        api: title === "新增" ? addChat : title === "编辑" ? updateChat : undefined,
        getTableList: proTable.value?.getTableList,
    };
    dialogRef.value?.acceptParams(params);
};
</script>